<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

// 表格数据
const tableData = ref([
  { type: '量表', name: 'SDS抑郁自评量表（成人）', order: 0 },
  { type: '量表', name: 'SCL-90症状自评量表（成人）', order: 0 },
])
</script>

<template>
  <h3>编辑计划</h3>
  <el-scrollbar height="520px">
    <div class="w">
      <!-- 表格 -->
      <div style="margin-top: 20px">
        <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ 'background-color': '#f5f7fa' }">
          <el-table-column prop="type" label="类型" min-width="180" />
          <el-table-column prop="name" label="名称" min-width="180" />
          <el-table-column prop="order" label="排序" min-width="180" >
            <template #default="scope">
              <div class="table-box">{{ scope.row.order }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 20px;padding-left: 100px">
        <el-button @click="router.push('/evaluation/editplan')">上一页</el-button>
        <el-button type="primary" @click="ElMessage.success('保存成功');router.push('/groupprogress')">保存修改</el-button>
      </div>
    </div>
  </el-scrollbar>
</template>

<style scoped>
h3 {
  text-align: center;
  padding: 10px 0;
  background-color: #e8f4ff;
}
.w {
  margin: 10px auto 0;
  width: 50%;
  min-height: 900px;
}
.table-box {
  display: flex;
  width: 100%;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center
}
</style>